@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 内部内容动画：保持 10px 不变 */
@keyframes slideUpContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes link-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.link-shake-animation {
    animation: link-shake 0.3s ease-in-out;
}

/* 侧边栏容器 */
.sidebar {
    position: fixed;    /* 固定在左侧，不随滚动条走 */
    left: 0;
    top: 0;
    width: 200px;       /* 侧边栏宽度 */
    height: 100vh;      /* 占满屏幕高度 */
    background: #ffffff; /* 纯白扁平化，或者用极浅的灰色 #f8f9fa */
    padding: 30px 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05); /* 极淡的阴影，增加层次感 */
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    display: flex;
    align-items: center;    /* 垂直居中对齐 */
    padding: 0 15px;        /* 左右留点边距 */
    margin-bottom: 40px;    /* 与下方链接的间距 */
    gap: 12px;              /* 图标和文字之间的间距 */
}

.sidebar-avatar {
    width: 60px;            /* 既然是并排，尺寸可以稍微调小一点点更协调 */
    height: 60px;
    border-radius: 0;       /* 彻底去掉圆角，变为纯方形 */
    object-fit: cover;
}

.sidebar-brand {
    display: flex;
    flex-direction: column; /* 让内部的两个 span 竖着排，实现换行 */
    text-align: left;       /* 文字左对齐 */
    font-size: 21.333px;        /* 因为分两行，字号可以稍微小一点 */
    font-weight: bold;
    color: #333;
    line-height: 1.2;       /* 紧凑的行高 */
    letter-spacing: 1px;
    text-transform: lowercase; /* 根据你的截图，保持小写更有感觉 */
}

/* 侧边栏标题 */
.side-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;    /* 进一步微调标题距离侧边栏最顶部的距离 */
    margin-bottom: 30px; /* 标题和下方“主页”链接的间距，可以稍微拉开一点点 */
    color: #333;
    letter-spacing: 1px;
    text-align: center;
}



/* 链接容器 */
.nav-links {
    display: flex;
    flex-direction: column; /* 竖向排列 */
    gap: 10px;
}

/* 单个链接样式 */
.nav-links a {
    position: relative;
    text-decoration: none;
    color: #666;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                padding-left 0.3s ease, 
                border-left 0.3s ease;
    border-left: 4px solid transparent; /* 预留一个左侧边框位 */
}

/* 3. 核心：当前页面(.active) 与 鼠标悬停(:hover) 共享灰色底 */
.nav-links a.active,
.nav-links a:hover {
    background: rgba(0, 0, 0, 0.05) !important; 
    color: #000;
}


/* 鼠标悬停效果：简单的背景变色+左侧亮起 */
.nav-links a:hover {
    background: #f0f4f8;   /* 极浅的蓝色背景 */
    color: #4A90E2;        /* 响的蓝色主题色 */
    border-left: 4px solid #4A90E2; /* 左侧出现一条蓝线 */
    padding-left: 20px;    /* 稍微向右位移一点，增加动态感 */
}


body {
    /* 1. 设置背景图片路径，注意 ../ 是因为 css 在子文件夹里 */
    background-image: url('../image/hibiki/126161292_p0.jpg'); 

    /* 2. 让背景固定，不随滚动条滚动（非常重要，很有高级感） */
    background-attachment: fixed;

    /* 3. 让背景图自动缩放，完美覆盖整个屏幕且不留白 */
    background-size: cover;

    /* 4. 让背景图片居中显示 */
    background-position: left top;

    /* 5. 禁止背景图片重复平铺 */
    background-repeat: no-repeat;

    /* 6. 设置一个底色，防止图片加载慢时页面一片空白 */
    background-color: #f0f2f5; 

    /* 7. 顺便优化一下字体和边距 */
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
}





/* 1. 修改入场动画定义：去掉 transform，只留透明度 */
/* 这样就不会在动画结束时锁死 transform 属性 */
@keyframes fadeInOnly {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 1. 小卡片容器：保持你的 12px 20px 间距，绝对不改 */
.card {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    margin: 10px 0;
    
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.3);

    transform: translateX(0) ;
    /* 核心：确保位移和背景色都有 transition */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease,
                box-shadow 0.3s ease ;
    
    /* 解决动画锁死的关键：外壳只负责透明度，不负责位移 */
    animation: fadeInOnly 0.8s ease forwards ;
}

/* 2. 悬停效果 */
.card:hover {
    background-color: rgba(255, 255, 255, 0.4) !important; 
    /* transform: translateX(8px) !important;  */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) ;
}

/* 3. 图标 */
.card img {
    width: 24px !important;    /* 强制执行你设定的尺寸 */
    height: 24px !important;
    min-width: 24px;           /* 防止被 flex 挤压 */
    margin-right: 15px;
    object-fit: contain;
    
    /* 内部浮现动画 */
    animation: slideUpContent 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 4. 文字修复：防止文字换行或跑偏 */
.card span {
    font-size: 16px;
    white-space: nowrap;       /* 防止文字换行撑大卡片 */
    animation: slideUpContent 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}




/* 外层大容器：让三大块横向排列 */
.container {
    display: flex;
    flex-wrap: wrap;    /* 屏幕窄时自动换行 */
    justify-content: flex-start; /* 核心：让所有卡片从左边开始排列 */
    row-gap: 40px;
    column-gap: 30px;
    
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 100px;     /* 这个数值越大，卡片距离顶部越远 */

    margin-left: 220px;        /* 与上方导航栏的间距 */
    padding-right: 40px;
    justify-content: flex-start; /* 确保卡片从左往右排 */
    box-sizing: border-box;  /* 确保 padding 不会把页面撑出横向滚动条 */

    opacity: 1;
}




.container-text {
    display: flex;
    flex-wrap: wrap;    /* 屏幕窄时自动换行 */
    justify-content: flex-start; /* 核心：让所有卡片从左边开始排列 */
    gap: 30px;          /* 大块之间的间距 */
    
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 100px;     /* 这个数值越大，卡片距离顶部越远 */

    margin-left: 220px;        /* 与上方导航栏的间距 */
    padding-right: 40px;
    justify-content: flex-start; /* 确保卡片从左往右排 */
    box-sizing: border-box;  /* 确保 padding 不会把页面撑出横向滚动条 */

    opacity: 1;
}

/* 容器逻辑：保持静止以保住毛玻璃 */
.info-card-flat, .section-card {
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    /* will-change 在静止状态下其实可以不写，减少渲染压力 */
}

/* 让大卡片里面的东西动，而不是卡片外壳动 */
.info-title, 
.info-content,
.section-card > * { 
    animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 大块卡片样式：保留你所有的 0.12、6px、180% 等参数 */
.section-card {
    background: rgba(255, 255, 255, 0.12); 
    backdrop-filter: blur(6px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(180%) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 25px;
    border-radius: 24px;
    width: 320px;
    position: relative;
    
    opacity: 0; /* 初始透明，交给动画去变亮 */
    animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}

/* --- Links 页面的逻辑 (保持你原来的) --- */
#links-page .section-card:nth-child(1) { animation-delay: 0.0s; }
#links-page .section-card:nth-child(2) { animation-delay: 0.07s; }
#links-page .section-card:nth-child(4) { animation-delay: 0.14s; }
#links-page .section-card:nth-child(5) { animation-delay: 0.21s; }

/* --- Works 页面全新的逻辑 --- */
/* 比如你想让作品页出得慢一点，或者有不同的错落感 */
#works-page .section-card:nth-child(1) { animation-delay: 0.1s; }
#works-page .section-card:nth-child(2) { animation-delay: 0.3s; } /* 故意拉开间距 */
#works-page .section-card:nth-child(3) { animation-delay: 0.2s; } /* 甚至可以第3个比第2个先出 */
#works-page .section-card:nth-child(4) { animation-delay: 0.4s; }

/* 大块卡片的样式 */
.section-card-text {
    /* 1. 降低底色厚度，让背景“透”出来 */
    background: rgba(255, 255, 255, 0.12); 
    
    /* 2. 强力毛玻璃：增加模糊度，最关键的是 saturate(200%)，它能吸取背景“响”的颜色 */
    backdrop-filter: blur(20px) saturate(150%) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.1);

    /* 3. 边缘“切面”高亮：模拟玻璃边缘折射光线 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* 4. 复合阴影：一层极其细微的白色外发光 + 柔和的深色落地影 */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1), /* 极细的外轮廓线 */
        0 8px 32px rgba(0, 0, 0, 0.1);      /* 落地阴影 */

    /* 5. 布局与圆角 */
    padding: 25px;
    border-radius: 24px;
    width: 320px;
    position: relative;
    
}

/* 标题样式：让它在框内更好看 */
.section-card h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    text-align: center;
}

/* 内部小卡片也要同步“减负”，否则会显得臃肿 */
.section-card .card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none; /* 去掉多余阴影，保持清透 */
}

.section-card h3 {
    margin-top: 0;      /* 彻底消除顶部的外边距 */
    padding-top: 0px;  /* 如果觉得太贴边了，可以用 padding 稍微留一点点呼吸感 */
    margin-bottom: 15px; /* 保留和下方卡片的距离 */
    text-align: left;  /* 保持居中 */

    /* --- 字体调整 --- */
    font-size: 24px;         /* 调整大小，可以尝试 20px 到 28px 之间 */
    font-family: "Microsoft YaHei", sans-serif; /* 换成微软雅黑或其他字体 */
    font-weight: bold;       /* 加粗，如果是 600 或 700 也可以 */

    /* --- 细节美化 --- */
    color: #333;             /* 字体颜色，深灰色比纯黑色更有高级感 */
    letter-spacing: 2px;     /* 字间距，让标题看起来更舒展 */
    
}

.break {
    flex-basis: 100%;
    width: 100%;
    height: 0;      /* 确保它没有高度 */
    margin: 0;      /* 确保它没有外边距 */
    padding: 0;     /* 确保它没有内边距 */
    overflow: hidden;
}


.main-content {
    /* 核心：这个数值要大于你侧边栏的宽度 (180px) */
    margin-left: 220px; 
    
    /* 增加顶部间距，防止文字贴顶 */
    padding-top: 50px; 
    padding-right: 40px;
    
    /* 字体样式 */
    color: #333;
    font-family: sans-serif;
}

/* 简介卡片专属：加宽、加长 */
.info-card {
    width: 100%;           /* 撑满父级 */
    max-width: 750px;      /* 但不要无限宽，800px 是阅读文字最舒服的宽度 */
    min-height: 500px;     /* 给它一个基础高度，防止内容太少显得寒碜 */
    padding-top: 10px; 
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 50px;
    
}

/* 标题样式 */
.info-title {
    font-size: 70px;
    letter-spacing: px;
    margin-bottom: 0px;
    margin-left: 30px; 
    margin-top: 25px;
    color: #333;
    border-bottom: none;   /* 简介页可以不用下划线，直接留白 */

    position: relative;    /* 核心：作为黄色长条定位的基准 */
    display: inline-block; /* 核心：让标题宽度仅随文字长度，防止黄色长条撑满全屏 */
    animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 制作淡黄色长条 */
.info-title::after {
    content: "";           /* 必须有 content 属性 */
    position: absolute;
    
    /* --- 定位与形状 --- */
    left: 25px;            /* 向左偏移一点，包住文字开头 */
    bottom: 25px;           /* 向上偏一点，不要完全贴底 */
    width: calc(100% + 10px); /* 宽度：标题宽度 + 15px 的呼吸空间 */
    height: 70px;          /* 长条的高度 */
    
    /* --- 颜色与质感 --- */
    background-color: rgba(255, 235, 59, 0.45); /* 淡黄色，带透明度 (iOS 26 风格) */
    
    /* --- 细节打磨 --- */
    border-radius: 4px;    /* 微弱圆角，增加精致感 */
    z-index: -1;           /* 核心：把长条放到文字后面 */
    
    /* --- 可选：增加一点故障艺术感 --- */
    /* transform: skewX(-15deg); 倾斜一点，像手涂的 */

    border: 1px solid rgba(255, 235, 59, 0.55);
    box-sizing: border-box; /* 极其重要：确保 1px 描边不会撑大长条的尺寸，导致定位偏移 */
}

/* 分割线样式：要和玻璃感匹配 */
.info-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255, 255, 255, 0.5), rgba(255,255,255,0));
    margin: 40px 0;
}

/* 强调文字 */
.highlight {
    background: rgba(108, 238, 255, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: bold;
    color: #000;
}

/* 段落间距 */
.info-content p {
    line-height: 2;        /* 拉开行距，让文字看起来不压抑 */
    margin-bottom: 20px;
    font-size: 18px;
    /* 水平 0, 垂直 1px, 模糊 3px, 黑色 15% 透明度 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    color: #333; /* 配合深灰色文字 */

}

/* 正文内容容器 */
.info-content {
    position: relative;
    
    /* 1. 核心：添加淡白色半透明底色 */
    background: rgba(255, 255, 255, 0.6); /* 极淡的白色 */
    
    /* 2. 核心：增加一点点模糊，让它和背景产生厚度感 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* 3. 形状与边距 */
    padding-top: 10px; 
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 16px;   /* 圆角，呼应大卡片 */
    
    /* 4. 细节：给这个底色加一个若隐若现的白边，更有玻璃感 */
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* 确保和上方标题有间距 */
    margin-top: 0px;
    animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 简介页专属：清新白色风格 */
.info-card-flat {
    /* 1. 覆盖掉之前的深色/高饱和度背景 */
    background: rgba(255, 255, 255, 0.75) !important; 
    
    /* 2. 覆盖掉之前的 25px 大模糊 */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    
    /* 3. 覆盖边框颜色 */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    
    /* 4. 调整圆角和阴影（保持和你刚才给的代码一致） */
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    
    /* 5. 宽度可以稍微加宽，方便阅读长文本 */
    max-width: 800px;
    width: 100%;
}

/* 移除内部原本的底色，防止叠加变脏 */
.info-card-flat .info-content {
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 20px 30px !important;
}

/* ============================================================
   4. 播放器：强制 16:9 且 底部圆角对齐
   ============================================================ */
.home-slider {
    width: 100%;
    /* 使用 16:9 比例锁定 */
    aspect-ratio: 16 / 9; 
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.slider-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.slider-inner img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* 保证图片在 16:9 框架内比例正常 */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider-inner img.fast-transition {
    transition: opacity 0.4s ease-out !important;
}

.slider-inner img.active {
    opacity: 1;
}

/* 圆点容器 */
.slider-dots {
    position: absolute;
    bottom: 15px;      /* 距离图片底部 15px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;         /* 点与点之间的间距 */
    z-index: 10;       /* 确保在图片上方 */
}

/* 单个圆点样式 */
.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5); /* 未激活时半透明白色 */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1); /* 增加一点点轮廓，防止在浅色图上看不见 */
}

/* 激活状态的圆点 */
.dot.active {
    background: rgba(255, 255, 255, 1);   /* 激活时全白 */
    transform: scale(1.3);                /* 稍微放大一点 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 封面容器：限制范围并切出圆角 */
.work-cover {
    width: 100%;
    border-radius: 12px;  /* 内部小圆角，比大卡片的 24px 稍微小一点更协调 */
    overflow: hidden;     /* 核心：确保图片超出的部分被“剪掉” */
    margin-bottom: 15px;  /* 和下方内容的间距 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 淡淡的边框，增加玻璃感 */
}

/* 封面图片：填充容器 */
.work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* 核心：图片自动填充不拉伸 */
    transition: transform 0.5s ease; /* 增加一点悬停动画的潜力 */
}

/* 可选：鼠标移入大卡片时，封面图轻微放大 */
.section-card:hover .work-cover img {
    transform: scale(1.05);
}

/* 针对作品卡片内的所有链接取消下划线 */
.section-card a {
    text-decoration: none; /* 去掉下划线 */
    color: inherit;       /* 顺便让链接颜色继承父级文字颜色，防止变成默认的蓝色 */
}

/* 如果你希望鼠标悬停时也不出现下划线 */
.section-card a:hover {
    text-decoration: none;
}